.swipe1 {
  position: relative;
}

.dataTable {
  margin-top: 12px;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--color-grey-3);
  background-color: var(--background-color-1);
}

.dataTableTd {
  text-align: center;
  vertical-align: middle;
  padding: 8px;
  border: 1px solid var(--color-grey-3);
}

.dataTableTh {
  color: var(--color-grey-4);
  font-weight: normal;
}

.dataTrWhite {
  background-color: var(--color-white);
}

.swipe4Block2 {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  margin-top: 12px;
  text-align: center;
  border: 1px solid var(--color-grey-3);
  background-color: var(--background-color-1);
}

.visfatImg {
  height: 54px;
}

.visfatImgName {
  font-size: var(--text-size-small);
}

.narraText {
  position: relative;
  font-size: var(--text-size-small);
  line-height: 1.5;
  width: 96px;
  white-space: nowrap;

  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    background-color: var(--color-grey-2);
  }
}

.narraText1 {
  &::before {
    left: -40px;
    width: 40px;
  }

  &::after {
    right: -42px;
    width: 42px;
  }
}

.narraText2 {
  &::before {
    left: -28px;
    width: 28px;
  }

  &::after {
    right: -35px;
    width: 35px;
  }
}

.narraText3 {
  &::before {
    left: -48px;
    width: 48px;
  }

  &::after {
    right: -48px;
    width: 48px;
  }
}

.tipText {
  font-size: var(--text-size-small);
  color: var(--color-grey-4);
  margin-top: 12px;
}
